<!DOCTYPE html>
<html>
<head>
	<title>URL校验</title>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<h1>URL校验</h1>
	<form>
		<label for="file-input">请选择文件：</label>
		<input type="file" id="file-input">
		<br>
		<button type="button" id="check-button">校验</button>
		<button onclick="openURLs()">Open URLs</button>
	</form>
	<br>
	<table id="result-table">
		<thead>
			<tr>
				<th>序号</th>
				<th>链接地址</th>
				<th>是否可用</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<script>
		// 定义全局变量，用于存储已经识别的链接
		var checkedUrls = [];

		// 点击校验按钮时执行的函数
		$("#check-button").click(function() {
			// 清空之前的校验结果
			$("#result-table tbody").empty();

			// 获取文件内容并进行长度校验
			var file = $("#file-input")[0].files[0];
			if (!file) {
				alert("请选择文件！");
				return;
			}
			var maxLength = $("#max-length").val();
			if (file.size > maxLength) {
				alert("文件大小超过最大输入上限！");
				return;
			}

			// 读取文件内容并识别所有的链接
			var reader = new FileReader();
			reader.onload = function(event) {
				var text = event.target.result;
				var urls = text.match(/((http|https):\/\/)[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/ig);

				// 对每个链接进行校验
				var count = 0;
				$.each(urls, function(index, url) {
					// 如果链接已经校验过，则跳过
					if (checkedUrls.indexOf(url) >= 0) {
						return true; // 等同于 continue
					}

					// 发送请求，检查链接是否可用
					var startTime = new Date().getTime();
					$.ajax({
						url: url,
						type: "HEAD",
						timeout: 5000, // 超过5秒则认为链接不可用
						success: function() {
							var endTime = new Date().getTime();
							var latency = endTime - startTime;

							// 在表格中添加校验结果
							count++;
							checkedUrls.push(url);
							$("#result-table tbody").append("<tr><td>" + count + "</td><td>" + url + "</td><td>可用（" + latency + "毫秒）</td></tr>");

							// 如果已经识别了所有链接，则提示校验完成
							if (count == urls.length) {
								alert("校验完成！");
							}
						},
						error: function() {
							// 在表格中添加校验结果
							count++;
							checkedUrls.push(url);
							$("#result-table tbody").append("<tr><td>" + count + "</td><td>" + url + "</td><td>不可用</td></tr>");

							// 如果已经识别了所有链接，则提示校验完成
							if (count == urls.length) {
								alert("校验完成！");
							}
						}
					});
				});
			};
			reader.readAsText(file);
		});
	</script>
</body>
</html>

<!-- 通过文件选择框导入文件，并自动识别文件中的链接。
对输入的文本长度进行了控制，如果超过最大输入上限，会给出友好的提示。
对输入合法性进行了校验，如果有错误，会给出优化提示。
以表格形式输出校验识别结果，表格头 -->